<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2024-03-20 22:35:41
 * @LastEditors: Cxy
 * @LastEditTime: 2024-03-21 22:20:14
 * @FilePath: \blogAdmin\play\src\views\home\codeLanguage.vue
-->
<script setup lang="ts">
import Echarts from '@/hooks/Echarts'

const commitRef = ref()
const { updateOption } = Echarts(commitRef, {
  title: {
    text: '项目语言占比',
    textStyle: {
      color: 'var(--color-text)'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  grid: {
    show: false,
    left: 90,
    top: 8,
    bottom: 24,
    right: 8,
    tooltip: {
      show: true
    }
  },
  radar: {
    indicator: [
      { name: 'Vue', max: 100 },
      { name: 'TypeScript', max: 100 },
      { name: 'JavaScript', max: 100 },
      { name: 'SCSS', max: 100 },
      { name: 'HTML', max: 100 },
      { name: 'Other', max: 100 }
    ],
    splitArea: {
      areaStyle: {
        color: ['var(--color-bg)', 'var(--main-color-bg)'],
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowBlur: 5
      }
    }
  },
  series: {
    name: '项目语言占比',
    type: 'radar',
    symbol: 'none',
    lineStyle: {
      width: 1,
      color: 'rgb(var(--color-primary-dark-2))'
    },
    emphasis: {
      areaStyle: {
        color: 'rgb(var(--color-primary-dark-2))'
      }
    },
    areaStyle: {
      color: 'rgb(var(--color-primary-dark-2))'
    },
    itemStyle: {
      color: 'rgb(var(--color-primary-dark-2))'
    },
    data: [] as { value: number[] }[]
  }
})

onMounted(async () => {
  await new Promise(r => setTimeout(r, 2000))
  updateOption(option => {
    option.series.data = [
      {
        value: [48.7, 26.3, 12.5, 11.6, 0.7, 0.2]
      }
    ]
    return option
  })
})
</script>
<template>
  <el-card shadow="hover">
    <div ref="commitRef" style="width: 100%; height: 100%" />
  </el-card>
</template>
